<template>
  <div>
    <iframe id="printIframe" ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
    <div ref="printDIV" style="display:none">
      <!-- 纸张是100mm*100mm,根据公式计算长宽大约是377px(可以根据实际进行调整) -->
      <div v-for="(item, index) in printData" :key="index" style="width: 370px;padding: 10px;page-break-after:always;">
        <table border="1" cellspacing="0" style="width: 100%;height: 350px;text-align: center;" align="center">
          <tr>
            <td colspan="2" style="width: 50%;height: 40px;font-size: 22px;">生产派工单</td>
            <td colspan="2" rowspan="2" style="height: 40px;">
              <qrcode-vue :value="item.dispatchCode" :size="80" render-as="svg" />
            </td>
          </tr>
          <tr>
            <td colspan="2" style="width: 50%;height: 40px;font-size: 22px;">{{ item.dispatchCode }}</td>
            <!-- <td style="width: 23%;height: 26px;text-align: right">派工单号：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{item.dispatchCode}}</td> -->
          </tr>
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">派工数量：</td>
            <td style="width: 27%;height: 26px;text-align: left" colspan="3">&nbsp;&nbsp;{{ item.dispatchNum }}</td>
          </tr>
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">生产计划：</td>
            <td style="width: 27%;height: 26px;text-align: left" colspan="3">&nbsp;&nbsp;{{ item.produceCode }}</td>
          </tr>
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">产品编码：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.goodsCode }}</td>
            <td style="width: 23%;height: 26px;text-align: right">产品名称：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.goodsName }}</td>
          </tr>
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">规格型号：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.goodsSpecification }}</td>
            <td style="width: 23%;height: 26px;text-align: right">计划数量：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.planNum }}</td>
          </tr>
          <!-- <tr>
            <td style="width: 23%;height: 26px;text-align: right">计划交期：</td>
            <td style="width: 27%;height: 26px;text-align: left" colspan="3">&nbsp;&nbsp;{{item.planEndDate}}</td>
          </tr> -->
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">工序编码：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.infoCode }}</td>
            <td style="width: 23%;height: 26px;text-align: right">工序名称：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.infoName }}</td>
          </tr>
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">工序顺序：</td>
            <td style="width: 27%;height: 26px;text-align: left" colspan="3">&nbsp;&nbsp;{{ item.theOrder }}</td>
          </tr>
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">指派工位：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.stName }}</td>
            <td style="width: 23%;height: 26px;text-align: right">生产人员：</td>
            <td style="width: 27%;height: 26px;text-align: left">&nbsp;&nbsp;{{ item.userName }}</td>
          </tr>
          <tr>
            <td style="width: 23%;height: 26px;text-align: right">派工日期：</td>
            <td style="width: 27%;height: 26px;text-align: left" colspan="3">&nbsp;&nbsp;{{ item.dispatchDate }}</td>
          </tr>
        </table>

      </div>
    </div>
  </div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import {
  listPrintDispatches
} from '@/api/workshopManage/dispatch'
export default {
  name: 'PrintDispatch',
  components: {
    QrcodeVue
  },
  props: {
    dispatchCodeArray: { // 派工单号数组
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      printData: []
    }
  },
  watch: {
    dispatchCodeArray(val) {
      if (val.length > 0) {
        // 通过 dispatchCodeArray 查询 要打印的派工单
        listPrintDispatches(this.dispatchCodeArray.join(',')).then(res => {
          this.printData = res.data
        }).then(() => {
          this.print()
        })
      }
    }
  },
  mounted() {

  },
  methods: {
    print() {
      // // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
      var printIframe = this.$refs.printIframe
      var newstr = this.$refs.printDIV.innerHTML
      printIframe.setAttribute('srcdoc', newstr)
      printIframe.onload = function() {
        // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = '0px'
        printIframe.contentWindow.document.body.style.margin = '0px'
        // 开始打印
        printIframe.contentWindow.focus()
        printIframe.contentWindow.print()
      }
    }
  }
}
</script>
<style scoped>
</style>
